<!doctype html>
<html>
<head>
	<meta charset="utf-8" />
	<link rel="stylesheet" type="text/css" href="/css/state.css" />
	<script src="/js/jquery.min.js"></script>
	<script src="/js/jweixin-1.0.0.js"></script>
	<script src="/js/socket.io.js"></script>
	<script src="/js/public.js"></script>
	<script src="/js/circle-progress.js" ></script>
	<title>速腾电器</title>
</head>
<body>
	<!-- 微信接口数据值调用 -->
	<input type="hidden" value="{{ $jssdkSignPackage['appId'] or 'default' }}" class="appId_val" />
	<input type="hidden" value="{{ $jssdkSignPackage['timestamp'] or 'default' }}" class="timestamp_val" />
	<input type="hidden" value="{{ $jssdkSignPackage['nonceStr'] or 'default' }}" class="nonceStr_val" />
	<input type="hidden" value="{{ $jssdkSignPackage['signature'] or 'default' }}" class="signature_val" />

	<!-- 调用滤芯剩余百分比数值 -->
    <input type="hidden" value="{{ $state['filter1'] or 0 }}" class="percents percent1" />
	<input type="hidden" value="{{ $state['filter2'] or 0 }}" class="percents percent2" />
	<input type="hidden" value="{{ $state['filter3'] or 0 }}" class="percents percent3" />
	<input type="hidden" value="{{ $state['filter4'] or 0 }}" class="percents percent4" />
	<!--获取水机状态值-->
	<input type="hidden" value="{{ $state['decStatus'] or '' }}" class="decStatus" />
	<section class="page">
		<section class="topBg">
			<section class="top">
				<section class="personalLogo" onclick="window.location.href='http://www.gdsuteng.cn/'"></section>
				<section class="setUp"></section>
			</section>
			 <img class="stateBgShow" src="/img/stateBgShow.png" /><!--背景阴影 -->
			 <img class="stateBg" src="/img/stateBg.png" /><!--背景图片 -->
			<img class="wash" src="/img/washBg.png" /><!--冲洗-->
			
			<img class="fillWater2" src="/img/fillWater2.png"/><!--水满-->
			<img class="fillWater1" src="/img/fillWater1.png"/><!--水满-->
			<img class="lessWater1" src="/img/lessWater1.png"/><!--缺水-->
			<img class="lessWater2" src="/img/lessWater2.png"/><!--缺水 -->
			<img class="service" src="/img/service.png"/><!--检修-->
			<img class="addWater1" src="/img/addWater1.png"/><!--制水-->
			<img class="shutDown" src="/img/shutDownBg.png"/><!--关机-->
			<img class="leak1" src="/img/leak1.png" /><!--漏水1-->
			<img class="leak2" src="/img/leak2.png" /><!--漏水2-->
			<section class="stateTextBox">	
				<p class="tdsText">pH酸碱值</p>
				<p class="phNum">{{ $state['phValue'] or '-.-' }}</p>
				<p class="pureWaterBox">
					<span>纯水TDS</span>
					<span class="pureWaterNum">{{ $state['TDS2'] or 0 }}</span>
				</p>
				<p class="phBox">
					<span>原水TDS</span>
					<span class="tdsNum">{{ $state['TDS1'] or 0 }}</span>
				</p>
			</section>
			<p class="stateText">离线</p>
		</section>
		<!-- 滤芯弹窗 start-->
		<section class="filter">
			<section class="filterBox">
				<section class="silder"></section>
				<!-- 滤芯1 -->
				<section class="filterBoxList">
					<section class="filterTitle">滤芯1信息</section>
					<section class="sectionFirst">
						<p class="p1"><span>剩余寿命：</span><span class="residueNum"></span></p>
						<p class="p2"><a href="http://www.gdsuteng.cn/phone/">购买滤芯</a></p>
					</section>
					<p>官方网站：http://www.gdsuteng.cn/</p>
					<section class="sectionFirst">
						<p class="p3">客服热线：<a href="tel:400-900-1468">400-900-1468</a></p>
					</section>
					<section class="filterBtn">
						<a class="callOff">取消</a>
						<a class="reset">立即复位</a>
					</section>
				</section>
				<section class="silder"></section>
				<!-- 滤芯2 -->
				<section class="filterBoxList">
					<section class="filterTitle">滤芯2信息</section>
					<section class="sectionFirst">
						<p class="p1"><span>剩余寿命：</span><span class="residueNum"></span></p>
						<p class="p2"><a href="http://www.gdsuteng.cn/phone/">购买滤芯</a></p>
					</section>
					<p>官方网站：http://www.gdsuteng.cn/</p>
					<section class="sectionFirst">
						<p class="p3">客服热线：<a href="tel:400-900-1468">400-900-1468</a></p>
					</section>
					<section class="filterBtn">
						<a class="callOff">取消</a>
						<a class="reset">立即复位</a>
					</section>
				</section>
				<section class="silder"></section>
				<!-- 滤芯3 -->
				<section class="filterBoxList">
					<section class="filterTitle">滤芯3信息</section>
					<section class="sectionFirst">
						<p class="p1"><span>剩余寿命：</span><span class="residueNum"></span></p>
						<p class="p2"><a href="http://www.gdsuteng.cn/phone/">购买滤芯</a></p>
					</section>
					<p>官方网站：http://www.gdsuteng.cn/</p>
					<section class="sectionFirst">
						<p class="p3">客服热线：<a href="tel:400-900-1468">400-900-1468</a></p>
					</section>
					<section class="filterBtn">
						<a class="callOff">取消</a>
						<a class="reset">立即复位</a>
					</section>
				</section>
				<section class="silder"></section>
				<!-- 滤芯4 -->
				<section class="filterBoxList">
					<section class="filterTitle">滤芯4信息</section>
					<section class="sectionFirst">
						<p class="p1"><span>剩余寿命：</span><span class="residueNum"></span></p>
						<p class="p2"><a href="http://www.gdsuteng.cn/phone/">购买滤芯</a></p>
					</section>
					<p>官方网站：http://www.gdsuteng.cn/</p>
					<section class="sectionFirst">
						<p class="p3">客服热线：<a href="tel:400-900-1468">400-900-1468</a></p>
					</section>
					<section class="filterBtn">
						<a class="callOff">取消</a>
						<a class="reset">立即复位</a>
					</section>
				</section>
				<section class="silder"></section>
			</section>
		</section>
		<!-- 滤芯弹窗 end-->
		<section class="centerBg">
			<ul class="ulBox">
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
	        <div class="circles">
	            <div class="first circle">
	                <strong></strong>
	                <span>1</span>
	            </div>
	            <div class="second circle">
	                <strong></strong>
	                <span>2</span>
	            </div>

	            <div class="third circle">
	                <strong></strong>
	                <span>3</span>
	            </div>
	            <div class="forth circle">
	                <strong></strong>
	                <span>4</span>
	            </div>
	        </div>
		</section>
		<section class="bottomBg">
			<a class="powerOffBtn">
				<img src="/img/powerOff.png" />
				<span class="powerOffText">开&nbsp;&nbsp;机</span>
			</a>
			<a class="washBtn">
				<img class="washWhite" src="/img/washWhite.png" />
				<img class="washGray" style="display: none;" src="/img/washGray.png" />
				<span class="washBtnText">冲&nbsp;&nbsp;洗</span>
			</a>
			<a class="personalBtn" onclick="window.location.href='/user/info'">
				<img class="personalWhile" src="/img/personalWhile.png" />
				<span class="personalBtnText">个人信息</span>
			</a>
			<a class="deviceBtn" onclick="window.location.href='/device/info'">
				<img class="deviceInforWihle" src="/img/deviceInforWihle.png" />
				<span class="deviceBtnText">设备信息</span>
			</a>
		</section>
	</section>
	<!-- 确认取消提示start -->
	<section class="undbing_bg">
		<section class="undbing_box">
			<p>确定要立即复位吗？</p>
			<section style="margin-top: 3.5rem">
				<a class="no_btn" >取消</a>
				<a class="yes_btn">确定</a>
			</section>
		</section>
	</section>
	<!-- 提交信息服务器反馈提示信息-->
	<section class="hint_bg">
		<section class="hint_box">
			<p class="hint_text" style="margin-top: 2.5rem;"></p>
			<section class="hint_btn" style="margin: 2rem auto;">确定</section>
		</section>
	</section>
	<script>
$('.page').height("100vh");
filterFn();

//异步传输数据
    var i=0;
    var socket = io('{{ $host }}:6001');
    socket.on('state-{{ $state['deviceCode'] }}:App\\Events\\DeviceStateInfoUpdate', function(message){
    	// console.log(message);
        if($(".percent1").val()!=message.deviceData['filter1']||
    		$(".percent2").val()!=message.deviceData['filter2']||
    		$(".percent3").val()!=message.deviceData['filter3']||
    		$(".percent4").val()!=message.deviceData['filter4']){
	        $(".percent1").val(message.deviceData['filter1']);
	        $(".percent2").val(message.deviceData['filter2']);
	        $(".percent3").val(message.deviceData['filter3']);
	        $(".percent4").val(message.deviceData['filter4']);
	        filterFn();
	        //测试显示滤芯值
	        $(".filterVal1").val(message.deviceData['filter1']);
	        $(".filterVal2").val(message.deviceData['filter2']);
	        $(".filterVal3").val(message.deviceData['filter3']);
	        $(".filterVal4").val(message.deviceData['filter4']);
    	}
    	$(".phNum").html(message.deviceData['phValue']);
    	$(".tdsNum").html(message.deviceData['TDS1']);
    	$(".pureWaterNum").html(message.deviceData['TDS2']);
        switch (message.deviceData['decStatus']){
			case 1://制水1
				addWater();
				break;
	    	case 2://缺水
	    		lessWater();
	    		break;
	    	case 3://待机
	    		standby();
	    		break;
	    	case 4://检修
	    		service();
	    		break;
	    	case 5://冲洗
	    		wash();
	    		break;
	    	case 7://关机
	    		shutDown();
	    		break;
	    	case 8://漏水
	    		leak ();
	    		break;
	    	case 9://水满
	    		fillWater();
	    		break;
	    	default:
	    		break;
    	}
    	i=0;
    });
    //隔40秒判定设备是否接受数据，若无，设置为离线
    setInterval(function(){
        i++;
        if(i == 40){
            offLine();    
        }
    }, 1000);
</script>
</body>
</html>
